/**
 * Created by JetBrains WebStorm.
 * User: matao01
 * Date: 11-9-12
 * Time: 下午7:22
 * To change this template use File | Settings | File Templates.
 */

(function(){
    var Panel = window.Panel || {};
    Panel.Menubar = function(panel){
        this.panel = panel;
        this.dom = this.createHtml();
		this.fillColorMenu = this.createSelectMenu('填充颜色：',  panel.MenuSet.fillColor);
		this.strokeColorMenu = this.createSelectMenu('笔触颜色：',  panel.MenuSet.strokeColor);
		this.strokeWidthMenu = this.createSelectMenu('边框宽度：',  panel.MenuSet.strokeWidth);
		this.strokeDasharrayMenu = this.createSelectMenu('边框类型：',  panel.MenuSet.strokeDasharray);
		this.shapeTypeMenu = this.createSelectMenu('画图形状：',  panel.MenuSet.shapeType);

    }

    Panel.Menubar.prototype = {
        createHtml: function(){
            var menu = document.createElement('ul');
            menu.id = 'panel-menubar-' + this.panel.uid;
            menu.className = 'panel-menubar';
            return menu;
        },

        /**
         * create a selection menu
         * @param labelText
         * @param data
         * @param callback
         */
		createSelectMenu: function (){
			var uid = 0;
			return function (labelText, data, callback){
			    var ele = document.createElement('li'),
					label = document.createElement('label'),
					select = document.createElement('select'),
					len = data.length,
					tmp = null;

				ele.id = 'select-menu' + (uid++);
				label.innerHTML = labelText;
				while (len--){
					tmp = document.createElement('option');
					tmp.value = data[len].value;
					tmp.innerHTML = data[len].text;
                    if(data[len].selected){
                        tmp.selected = 'selected';
                    }
					select.insertBefore(tmp, select.firstChild);
				}

				ele.appendChild(label);
				ele.appendChild(select);
				this.dom.appendChild(ele);
				ele = label = select = null;
                return {
                    dom: this.dom.lastChild,
                    getValue: function(){
                         return this.dom.getElementsByTagName('select')[0].value;
                    }
                };
			}
		}()
    };
})();